<template>
  <div class="bottom-nav">
    <ul>
      <li
        v-for="(tab,index) in tabs"
        :key="index"
        :class="{active: index === activeIndex}"
      >
        <a :href="tab.href"><i :class="tab.icon"></i>
          <div>{{tab.name}}</div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "Foot",
    props: {
      activeIndex: {
        default: 0
      }
    },
    data(){
      return {
        tabs: [
          {name: '有赞', icon: 'icon-home', href: 'index.html'},
          {name: '分类', icon: 'icon-category', href: 'category.html'},
          {name: '购物车', icon: 'icon-cart', href: 'cart.html'},
          {name: '我', icon: 'icon-user', href: 'member.html'},
        ]
      }
    },
    created(){
      console.log('底部导航的activeIndex');
      console.log(this.activeIndex)
    }
  }
</script>

<style scoped lang="css">
  .bottom-nav {
    position: fixed;
    width: 100%;
    height: 50px;
    bottom: 0;
    background-color: #fff;
    z-index: 1000;
    -o-border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
    border-image: url(https://b.yzcdn.cn/v2/image/wap/border-line-2.png) 2 stretch;
    border-top: 2px solid #e5e5e5
  }

  @media only screen and (-webkit-min-device-pixel-ratio:1.5),
  only screen and (min--moz-device-pixel-ratio:1.5),
  only screen and (min-device-pixel-ratio:1.5) {
    .bottom-nav {
      border-top-width: 1px
    }
  }

  .bottom-nav ul {
    position: relative;
    height: 100%;
    zoom: 1
  }

  .bottom-nav ul:after {
    content: "";
    display: table;
    clear: both
  }

  .bottom-nav li {
    display: block;
    float: left;
    width: 25%;
    height: 100%
  }

  .bottom-nav a {
    display: block;
    width: 100%;
    height: 100%;
    padding-top: 8px;
    text-align: center;
    font-size: 10px
  }

  .bottom-nav [class^=icon-] {
    display: block;
    width: 22px;
    height: 22px;
    margin: auto;
    margin-bottom: 4px;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% auto
  }

  .bottom-nav .icon-home {
    background-image: url("")
  }

  .bottom-nav .icon-category {
    background-image: url("")
  }

  .bottom-nav .icon-cart {
    background-image: url("")
  }

  .bottom-nav .icon-user {
    background-image: url("")
  }

  .bottom-nav .active a {
    color: #ff6366
  }

  .bottom-nav .active .icon-home {
    background-image: url("")
  }

  .bottom-nav .active .icon-category {
    background-image: url("")
  }

  .bottom-nav .active .icon-cart {
    background-image: url("")
  }

  .bottom-nav .active .icon-user {
    background-image: url("")
  }

</style>
